<template>
  <div class="app-container">
    <div>
      <h4 style="text-align: left;">居民详情</h4>
      <el-button style='position: absolute;right:20px;top:25px;'>发消息</el-button>
    </div>
<!--

    <el-form label-width="120px">
      <h6>居民信息</h6>
      <el-form-item label="居民编号">
        <el-input v-model="article.title"/>
      </el-form-item>

      &lt;!&ndash; 用户图片 &ndash;&gt;
      <el-form-item label="用户图片">
        <el-upload
          title="file"
          class="avatar-uploader"
          action="http://localhost:8080/upload/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="article.image" :src="'http://rj0158yod.hd-bkt.clouddn.com/' + article.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="用户分类">
        <el-select v-model="article.classify" clearable placeholder="请选择">
          <el-option value="0" label="健康头条"/>
          <el-option value="1" label="慢病护理"/>
        </el-select>
      </el-form-item>

      <el-form-item label="用户内容">
        <el-input v-model="article.description" :rows="10" type="textarea"/>
      </el-form-item>

      <el-form-item label="排序号">
        <el-input-number v-model="article.sort" controls-position="right"/>
      </el-form-item>

      <el-form-item label="发布人ID">
        <el-input v-model="article.doctorId"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="handleAddOrEdit">保存</el-button>
        <el-button @click="back">取 消</el-button>
      </el-form-item>
    </el-form>-->

    <el-form>

      <hr>
      <h4>居民信息</h4>
      <el-row>
        <el-col :span="6">
          <el-form-item label="居民编号">
            {{20201018 + userDetailVo.id}}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="姓名">
            {{userDetailVo.name}}
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="头像">
            <div class="block">
              <el-avatar :size="30" :src="'http://rj0158yod.hd-bkt.clouddn.com/' + userDetailVo.image"></el-avatar>
              <el-link type="primary">+点击上传</el-link>
            </div>

          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="身份证号">
            {{userDetailVo.code}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="手机号码">
            {{userDetailVo.phone}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="现居地">
            {{userDetailVo.addressNow}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登录密码">
            {{userDetailVo.password}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="行政区划">
            {{userDetailVo.committee}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="居民标签">
            <el-tag
              v-for="label in userDetailVo.labelList"
              :key="label.id"
              :value="label.id"
              effect="plain">
              {{ label.name }}
            </el-tag>

          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别">
            <span v-if="userDetailVo.sex == '0'">男</span>
            <span v-if="userDetailVo.sex == '1'">女</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="出生日期">
            {{userDetailVo.birthday}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="籍贯">
            {{userDetailVo.nativePlace}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="民族">
            {{userDetailVo.nationality}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="文化程度">
            {{userDetailVo.educationalLevel}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="婚姻状况">
            <span v-if="userDetailVo.isMerry == '0'">未婚</span>
            <span v-if="userDetailVo.isMerry == '1'">已婚</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="职业">
            {{userDetailVo.job}}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="工作单位">
            {{userDetailVo.workUnit}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="紧急联系人">
            {{userDetailVo.urgencyName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系人电话">
            {{userDetailVo.urgencyPhone}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="户籍类型">
            <span v-if="userDetailVo.nativeType == '0'">农村</span>
            <span v-if="userDetailVo.nativeType == '1'">城镇</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="费用类型">
            自费
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="定点医疗单位">
            {{userDetailVo.hospitalName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="来源">
            用户注册
          </el-form-item>
        </el-col>
      </el-row>

      <hr>
      <h4>健康信息</h4>
      <el-row>
        <el-col :span="6">
          <el-form-item label="身高">
            {{userDetailVo.height}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="体重">
            {{userDetailVo.weight}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="血型">
            <span v-if="userDetailVo.bloodType == '0'">A型</span>
            <span v-if="userDetailVo.bloodType == '1'">B型</span>
            <span v-if="userDetailVo.bloodType == '3'">AB型</span>
            <span v-if="userDetailVo.bloodType == '4'">O型</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="RH阴性">
            否
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="过敏史">
            否
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="既往史">
            否
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="就诊史">
            否
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="家族病史">
            否
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <router-link :to="'/user/edit/' + userDetailVo.id">
          <el-button type="primary" size="mini" icon="el-icon-edit">编辑档案信息</el-button>
        </router-link>
        <el-button @click="back">返 回</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>
<script>
import user from "../../api/user";
import label from "../../api/admin/label";

  export default {
    data() {
      return {
        userDetailVo: {              //表单数据的绑定模型
          image: ""
        },
        saveBtnDisabled: false, //防止表单重复提交
        labelList: [],                    //标签数组
      }
    },
    created(){
      // 获取路由地址里面的参数
      console.log(this.$route);
      if(this.$route.params && this.$route.params.id){
        // 表示: 路由参数里面有值，并且有id这个值，就是进行修改操作
        console.log("进行修改操作")
        // 需要通过培训师的id去查询培训师的数据
        this.queryById(this.$route.params.id);
      } else {

      }
      this.getLabelList();
    },
    methods: {
      // 根据ID查询用户
      queryById(userId){
        user.queryById(userId).then(res => {
          this.userDetailVo = res.data;
          console.log(res.data);
        });
      },
      //查询所有标签
      getLabelList(){
        label.getAll().then(res => {
          this.labelList = res.data;
        });
      },
      //点击添加按钮
      handleAddOrEdit(){

        // 把saveBtnDisabled 改为true  表示这按钮不可以被点击
        this.saveBtnDisabled = true;

        if(this.$route.params && this.$route.params.id){
          // 修改操作
          user.edit(this.user).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/user/list' })
          });
        }else{
          // 增加操作
          //调用新增方法
          user.add(this.user).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/user/list' })
          });
        }

        this.saveBtnDisabled = false;

      },
      back(){
        this.$router.push({ path: '/user/list' });
      },

      /**
       * 图片上传成功之后回调该函数
       * @param res   响应回来的数据,通过该对象可以获得响应数据
       * @param file  上传的图片file
       */
      handleAvatarSuccess(res, file) {
        console.log("上传图片响应回来的数据为:" + res.data);
        //this.article.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res;
        console.log("this.user.image = " + this.user.image);
        this.user.image = res.data;
      },

      /**
       * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
       * @param file    上传的图片file
       * @returns {boolean}
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片图片只能是 JPG 或 png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

